<template>
  <div class="online_class">
    <div class="online_class_content">
      <!--统一样式-->
      <div class="online_class_title">
        <div class="online_class_title_icon">
          <img src="./../../../assets/home/zaixianketang.svg" alt="" />
        </div>
        <p class="online_class_title_font">在线课堂</p>
        <div class="online_class_title_more" @click="gotoClassRoom">
          更多 <i class="el-icon-d-arrow-right"></i>
        </div>
      </div>
      <div class="online_class_video">
        <div class="online_class_video_left">
          <div
            v-for="item in classRoomList4"
            class="online_class_video_left_modules"
            :key="item.id"
          >
            <div
              class="online_class_video_left_modules_img"
              @click="handleVideo(item.id)"
            >
              <img :src="item.url ? item.url : ''" alt="" />
            </div>
            <p class="online_class_video_left_modules_p">{{ item.title }}</p>
          </div>
        </div>
        <div class="online_class_video_right">
          <div
            class="online_class_video_right_modules_img"
            @click="handleVideo(classRoomList1[0] && classRoomList1[0].id)"
          >
            <img
              :src="classRoomList1[0] && classRoomList1[0].url || ''"
              alt=""
            />
          </div>
          <p class="online_class_video_left_modules_p">
            {{ classRoomList1[0] && classRoomList1[0].title || '' }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeSectionList } from "@/api/home";
export default {
  name: "onlineClass",
  data() {
    return {
      homeSectionData: {
        page: 1,
        size: 5,
      },
      classRoomList4: [],
      classRoomList1: [],
    };
  },
  mounted() {
    this.getHomeSectionList();
  },
  methods: {
    getHomeSectionList() {
      getHomeSectionList(this.homeSectionData).then((response) => {
        if (response && response.data.code === 20000) {
          const list = response.data.results.list;
          
          // 方案1：根据内容长度或特定属性分类
          this.classRoomList1 = list.filter(item => 
            item.content && item.content.length > 100 || item.type === '特定类型'
          ).slice(0, 1); // 只取一个

          this.classRoomList4 = list.filter(item => 
            !this.classRoomList1.find(big => big.id === item.id)
          ).slice(0, 4); // 取4个

          // 如果筛选后数量不够，补充数据
          if (this.classRoomList1.length === 0 && list.length > 0) {
            this.classRoomList1 = [list[0]];
          }
          if (this.classRoomList4.length < 4) {
            const remaining = list.filter(item => 
              !this.classRoomList1.find(big => big.id === item.id)
            );
            this.classRoomList4 = remaining.slice(0, 4);
          }
        } else {
          this.classRoomList4 = [];
          this.classRoomList1 = [];
        }
      });
    },
    handleVideo(id) {
      this.$router.push({
        path: "/onlineClass/regulations",
        query: {
          routerName: "在线课堂详情",
          classRoomId: id,
        },
      });
    },
    gotoClassRoom() {
      this.$router.push({
        path: "/onlineClass/regulationsList",
        query: {
          routerName: "共同条令",
          type: "",
        },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.online_class {
  height: 590px;
  background-color: #f1f1f1;
  color: #333;
  .online_class_content {
    width: 1280px;
    margin: 0 auto;
    .online_class_title {
      padding-top: 40px;
      display: flex;
      padding-bottom: 15px;
      border-bottom: 2px solid #0a7b19;
      .online_class_title_icon {
        width: 32px;
        height: 32px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .online_class_title_font {
        font-weight: bold;
        font-size: 24px;
        margin-left: 15px;
        width: 100px;
      }
      .online_class_title_more {
        font-size: 12px;
        height: 32px;
        line-height: 32px;
        text-align: right;
        width: 1133px;
        cursor: pointer;
      }
    }
    .online_class_video {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      gap: 16px;
      .online_class_video_left {
        width: 620px;
        height: 450px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        .online_class_video_left_modules {
          width: 300px;
          height: 225px;
          margin-bottom: 0;
          cursor: pointer;
          .online_class_video_left_modules_img {
            width: 100%;
            height: 184px;
            background-color: #868686;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .online_class_video_left_modules_p {
            width: 100%;
            text-align: center;
            height: 20px;
            line-height: 20px;
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .online_class_video_right {
        width: 620px;
        height: 450px;
        text-align: center;
        .online_class_video_right_modules_img {
          cursor: pointer;
          width: 100%;
          height: 425px;
          background-color: #868686;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .online_class_video_left_modules_p{
          width: 100%;
          text-align: center;
          height: 20px;
          line-height: 20px;
          margin-top: 10px;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
